<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客 - 文章详情</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <style>
        /* 新增按钮样式 */
        .carousel-control-prev, .carousel-control-next {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
        }
        .carousel-control-prev:hover, .carousel-control-next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
        .carousel-control-prev-icon, .carousel-control-next-icon {
            width: 20px;
            height: 20px;
            filter: invert(100%); /* 白色图标 */
        }
    </style>
</head>
<body>
    <header class="bg-primary text-white py-3">
        <div class="container">
            <h1>个人博客</h1>
        </div>
    </header>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="index.html">主页</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="list.html">文章列表</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main class="container my-4">
        <div class="row">
            <div class="col-md-8">
                <!-- 修改走马灯效果为文字内容 -->
                <div id="carouselExample" class="carousel slide mb-4" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="d-flex justify-content-center align-items-center h-100">
                                <div class="text-center">
                                    <h3>走马灯内容1</h3>
                                    <p>这是一段关于技术的文章介绍，详细讲解了如何使用Bootstrap开发响应式网页。</p>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="d-flex justify-content-center align-items-center h-100">
                                <div class="text-center">
                                    <h3>走马灯内容2</h3>
                                    <p>这是一段关于生活的分享，记录了一些旅行的经历和感悟。</p>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="d-flex justify-content-center align-items-center h-100">
                                <div class="text-center">
                                    <h3>走马灯内容3</h3>
                                    <p>这是一段关于编程的技巧分享，介绍了如何优化代码性能。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 修改按钮样式 -->
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>

                <article class="mb-4">
                    <h2 class="mb-3" id="articleTitle">文章标题1</h2>
                    <p class="text-muted">作者：张三 | 发布时间：2023-05-01</p>
                    <img src="https://via.placeholder.com/800x400" class="img-fluid mb-3" alt="文章封面" style="width: 400px; height: 200px;">
                    <p id="articleContent">这是一篇关于技术的文章，详细介绍了如何使用Bootstrap开发响应式网页。Bootstrap 是一个流行的前端框架，提供了丰富的组件和工具，帮助开发者快速构建现代化的网页。</p>
                </article>
                <!-- 评论区 -->
                <section class="mb-4">
                    <h3>评论区</h3>
                    <form>
                        <div class="mb-3">
                            <label for="commentName" class="form-label">姓名</label>
                            <input type="text" class="form-control" id="commentName" required>
                        </div>
                        <div class="mb-3">
                            <label for="commentContent" class="form-label">评论内容</label>
                            <textarea class="form-control" id="commentContent" rows="3" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">提交评论</button>
                    </form>
                </section>
            </div>
            <div class="col-md-4">
                <aside class="bg-light p-3">
                    <h3>关于我</h3>
                    <p>
                        我是一名充满激情与创新精神的青年企业家，专注于科技与商业领域的融合发展。多年来，我始终致力于通过技术创新推动企业成长，为企业和社会创造更大的价值。作为一名创业者，我曾成功创立并运营多家公司，涉及人工智能、电子商务和绿色能源等多个领域。我的团队和我一起，不断探索前沿技术，力求为用户提供卓越的产品和服务。除了商业成就，我还热衷于公益事业，积极参与社会公益活动，努力回馈社会。我相信，企业家的责任不仅在于追求利润，更在于用实际行动影响和改善世界。
                    </p>
                </aside>
            </div>
        </div>
    </main>

    <footer class="bg-dark text-white text-center py-3">
        <div class="container">
            &copy; 2025 吴晓宇个人博客. All rights reserved.
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/script.js"></script>
    <script>
        // 新增脚本：加载文章数据
        document.addEventListener('DOMContentLoaded', function () {
            const title = localStorage.getItem('articleTitle');
            const content = localStorage.getItem('articleContent');
            const imageUrl = localStorage.getItem('articleImageUrl'); // 新增：获取图片路径
            if (title && content && imageUrl) {
                document.getElementById('articleTitle').innerText = title;
                document.getElementById('articleContent').innerText = content;
                document.querySelector('img.img-fluid').src = imageUrl; // 新增：设置图片路径
            }
        });
    </script>
</body>
</html>